/**
 * 级联选择框组件
 * @author SPY
 * @date 2020/04/02
 */
import React from 'react';
import { Cascader } from 'antd';

export interface SimpleCascaderProps {
  idKey?: string; // 级联选择框节点对应的id名称
  nameKey?: string; // 级联选择框节点对应的name名称
  childListKey?: string; // 级联选择框节点的子集的id名称
  placeholder?: string; // 级联选择框的提示信息
  dataSource: Array<ItemProps>; // 级联选择框要展示的数组列表
  [x: string]: any; // 兼容antd组件默认参数传入
}

export interface ItemProps {
  [key: string]: any; // 定义对象的下标为string类型
}

const SimpleCascader: React.FC<SimpleCascaderProps> = props => {
  const {
    idKey = 'value',
    nameKey = 'label',
    childListKey = 'children',
    placeholder = '请选择',
    dataSource,
    ...restProps
  } = props;
  return (
    <Cascader
      placeholder={placeholder}
      options={dataSource}
      fieldNames={{ value: idKey, label: nameKey, children: childListKey }} // 替换字段
      displayRender={label => label.join('-')} // 名称之间的连接符
      changeOnSelect // 点选每级菜单选项值都会发生变化
      showSearch // 在选择框中显示搜索框
      {...restProps}
    />
  );
};

export default SimpleCascader;
